<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

	<title>地址管理</title>

	<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
	<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

	<link href="../css/personal.css" rel="stylesheet" type="text/css">
	<link href="../css/addstyle.css" rel="stylesheet" type="text/css">
	<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
	<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<script src="../js/axiosUtil.js"></script>
</head>

<body>
	<!--头 -->
	<header>
		<article>
			<div class="mt-logo" id="app1">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<template v-if="!islogin">
									<div class="menu-hd">
										<a href="login.html" target="_top" class="h">亲，请登录</a>
										<a href="register.html" target="_top">免费注册</a>
									</div>
								</template>
								<template v-else>
									<div class="menu-hd">
										<a href="#" style="color: red;">{{username}}</a>
										<a href="#" @click="logout">退出登录</a>
									</div>
								</template>
							</div>
						</ul>
						<ul class="message-r" v-if="islogin">
							<div class="topMessage home">
								<div class="menu-hd"><a href="home.html" target="_top" class="h">商城首页</a></div>
							</div>
							<template v-if="islogin">
								<div class="topMessage my-shangcheng">
									<div class="menu-hd MyShangcheng"><a href="information.html" target="_top"><i
												class="am-icon-user am-icon-fw"></i>个人中心</a></div>
								</div>
								<div class="topMessage mini-cart">
									<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
												class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
												id="J_MiniCartNum" class="h">0</strong></a></div>
								</div>
							</template>
						</ul>
					</div>

						<!--悬浮搜索框-->

						<div class="nav white">
							<div class="logoBig">
								<li><img src="../images/logobig.png" /></li>
							</div>

							<div class="search-bar pr">
								<a name="index_none_header_sysc" href="#"></a>
								<form>
									<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
									<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
								</form>
							</div>
						</div>
				<div class="clear"></div>
			</div>
			</div>
		</article>
	</header>

	<div class="nav-table">
		<div class="long-title"><span class="all-goods">全部分类</span></div>
		<div class="nav-cont">
			<ul>
				<li class="index"><a href="#">首页</a></li>
				<li class="qc"><a href="#">闪购</a></li>
				<li class="qc"><a href="#">限时抢</a></li>
				<li class="qc"><a href="#">团购</a></li>
				<li class="qc last"><a href="#">大包装</a></li>
			</ul>

		</div>
	</div>
	<b class="line"></b>

	<div class="center">
		<div class="col-main">
			<div class="main-wrap" id="app2">

				<div class="user-address">
					<!--标题 -->
					<div class="am-cf am-padding">
						<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> /
							<small>Address&nbsp;list</small></div>
					</div>
					<hr />
					<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails" style="margin-left: 15px; margin-top: 10px;">

						<li class="user-addresslist" v-for="(item,index) in tableData" :key="index">
							<p class="new-tit new-p-re">
								<span class="new-txt">{{item.receiverName}}</span>
								<span class="new-txt-rd2">{{item.receiverPhone}}</span>
							</p>
							<div class="new-mu_l2a new-p-re">
								<p class="new-mu_l2cw">
									<span class="title">地址：</span>
									{{item.receiverAddress}}
							</div>
							<div class="new-addr-btn">
								<a href="#" @click="edit(index)"><i class="am-icon-edit"></i>编辑</a>
								<span class="new-addr-bar">|</span>
								<a href="javascript:void(0);" @click="del(item.id);"><i
										class="am-icon-trash"></i>删除</a>
							</div>
						</li>

					</ul>
					<div class="clear"></div>
					<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
					<!--例子-->

					<div class="add-dress" >

						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> /
								<small>Add&nbsp;address</small></div>
						</div>
						<hr />

						<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
							<form class="am-form am-form-horizontal">

								<div class="am-form-group">
									<label for="user-name" class="am-form-label">收货人</label>
									<div class="am-form-content">
										<input type="text" id="user-name" placeholder="收货人" v-model="address.receiverName">
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">手机号码</label>
									<div class="am-form-content">
										<input id="user-phone" placeholder="手机号必填" type="tel" v-model="address.receiverPhone">
									</div>
								</div>
								<div class="am-form-group">
									<label for="user-address" class="am-form-label">所在地</label>
									<div class="am-form-content address">
										<input type="text" placeholder="省" v-model="address.receiverProvince"> &nbsp;
										<input type="text" placeholder="市" v-model="address.receiverCity"> &nbsp;
										<input type="text" placeholder="区/县" v-model="address.receiverDistrict"> &nbsp;
									</div>
									
								</div>

								<div class="am-form-group">
									<label for="user-intro" class="am-form-label">详细地址</label>
									<div class="am-form-content">
										<textarea class="" rows="3" id="user-intro" placeholder="输入详细地址" v-model="address.receiverAddress"></textarea>
										<small>100字以内写出你的详细地址...</small>
									</div>
								</div>

								<div class="am-form-group">
									<div class="am-u-sm-9 am-u-sm-push-3">
										<a class="am-btn am-btn-danger" @click="save">保存</a>
									</div>
								</div>
							</form>
						</div>

					</div>

				</div>


				<div class="clear"></div>
			</div>

			<!-- 底部 -->
			<div class="footer">
				<div class="footer-hd ">
					<p>
						<a href="# ">燕园科技</a>
						<b>|</b>
						<a href="home.html">商城首页</a>
						<b>|</b>
						<a href="# ">支付宝</a>
						<b>|</b>
						<a href="# ">物流</a>
					</p>
				</div>
				<div class="footer-bd ">
					<p>
						<a href="#">关于燕园</a>
						<a href="# ">合作伙伴</a>
						<a href="# ">联系我们</a>
						<a href="# ">网站地图</a>
						<em>© 2020-2020 shop.ysu.edu 耿志龙 版权所有</em>
					</p>
				</div>
			</div>
		</div>
		<aside class="menu">
			<ul>
				<li class="person">
					<a href="#">个人中心</a>
				</li>
				<li class="person">
					<a href="#">个人资料</a>
					<ul>
						<li > <a href="information.html">个人信息</a></li>
						<li class="active"> <a href="#">收货地址</a></li>
						<li> <a href="password.html">修改密码</a></li>
					</ul>
				</li>
				<li class="person">
					<a href="#">我的交易</a>
					<ul>
						<!-- <li><a href="order.html">订单管理</a></li> -->
						<li> <a href="billist.html">账单明细</a></li>
					</ul>
				</li>

			</ul>
		</aside>
	</div>
	<script src="../js/public.js"></script>
	<script>
		let vm2 = new Vue({
			el: '#app2',
			data: {
				tableData: [],
				isedit: false, // 是否处于编辑状态
				id: '',
				address: {
					receiverName: '',
					receiverPhone: '',
					receiverProvince: '河北省',
					receiverCity: '秦皇岛市',
					receiverDistrict: '海港区',
					receiverAddress: '河北省河北省海港区燕山大学西校区'
				}
			},
			created() {
				this.getData()
			},
			methods: {
				getData() {
					$axios.get('/address',
						response => {
							this.tableData = response.data
						}
					)
				},
				save() {
					if (this.isedit){
						$axios.put(`/address/${this.id}`,
							response => {
								this.id = ''
								this.isedit = false
								this.address = {}
								this.getData()
							}, this.address
						)
					}else {
						if (this.tableData.length>2) {
							window.alert("亲，每个用户只能保留3个收货地址")
							return
						}
						$axios.post(`/address`,
							response => {
								this.id = ''
								this.getData()
							}, this.address
						)
					}
				},
				edit(id) {
					this.isedit = true
					this.id = this.tableData[id].id
					this.address = this.tableData[id]
				},
				del(id) {
					$axios.del(`/address/${id}`,
						response => {
							this.getData()
						}
					)
				}
			}
		})
	</script>
</body>

</html>